<template>
	<view class="content">
		<view class="head">
			<image
				lazy-load mode="aspectFit"
				:src="userInfo.avatarUrl"
				class="img"
			></image>
			<text>{{ userInfo.nickName }}</text>
		</view>
		<view class="tab-list">
			<text class="title">我的订单</text>
			<view class="tab">
				<view
					class="tab-item" v-for="(v, i) in 4" :key="i"
					@click="jumpTo(i)"
				>
					<image
						lazy-load mode="aspectFit"
						class="img"
						src="https://img1.baidu.com/it/u=93999198,3109633459&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1674320400&t=c430c9e189a9797cd0ec73b5a27946ec"
					></image>
					<text>已支付</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import delSlideLeft from '@/components/SlideOperate/index.vue'
export default {
	components: {
		delSlideLeft,
	},
	data() {
		return {
		}
	},
	computed: {
		userInfo() {
			return this.$store.state.userInfo;
		}
	},
	methods: {
		/**
		 * 跳转到订单
		 */
		jumpTo() {
			uni.navigateTo({
				url: '/pages/order/list?id=1&name=uniapp'
			});
		}
	}
}
</script>

<style lang="stylus">
.content
	.head
		display flex
		align-items center
		font-size 36rpx
		margin 0 30rpx
		.img
			border-radius 60rpx
			height 120rpx
			width 120rpx
			margin-right 20rpx

	.tab-list
		background #fff
		padding 40rpx
		border-radius 8rpx
		margin 30rpx

		.title
			font-size 32rpx
			margin-bottom 32rpx
			display block
		.tab
			display flex
			justify-content space-between

		.tab-item
			display flex
			flex-direction column
			align-items center

			.img
				height 80rpx
				width 80rpx
				margin-bottom 16rpx

</style>
